当前位置：首页 > 脚本编程 > CSS/HTML >

css怎么实现首字母下沉效果

来源:网络整理作者: 发布时间:2020-12-17 12:02

css实现首字母下沉效果的方法：可以通过使用first-letter伪类选择器来实现，如【.contain p:first-letter{}】。first-letter伪类...

相关介绍：

css怎么实现首字母下沉效果

:first-letter选择器用来指定元素第一个字母的样式。

（学习视频分享：css视频教程）

css实现首字母下沉效果的方法：可以通过使用first-letter伪类选择器来实现，如【.contain p:first-letter{}】。first-letter伪类选择器用来指定元素第一个字母的样式。

HTML代码：

可以通过使用css的first-letter伪类选择器来实现首字母下沉效果。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #FFFFFF; color: #595959; } .contain { width: 150px; } .contain p { font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif; } .contain p:first-letter { font-size: 2em; padding: 0.1em; color: #000000; vertical-align: middle; } .contain p:first-line { color: red; } .contain p:first-child:first-letter { color: red; } .contain p:first-child:first-line { color: inherit; } </style> </head> <body> <div> <p>This is a test article. This is a test article.</p> <p>This is a test article. This is a test article.</p> <p>这是一个测试</p> </div> </body> </html>

实现效果：

相关热词： CSS

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/4812.shtml

上一篇：css ellipsis不起作用怎么办

下一篇：css如何让文字有阴影

用react的ReactCSSTransitionGroup插件	当你自己回头来看你写的这些
我们直接看代码： !DOCTYPE htm	那么使用 CSS3 新增的选择器无
微软IE9平台预览版完整支持H	IE9正式版无论从性能提升还是
CSS3东西最新资讯	各路人马对它的热情都极为高
中联重科CSS3混凝土喷射机器手	CSS3与页面机关进修总结（二）
四、id选择器（#ID） ID选择器	谈谈一些有趣的CSS题目（十）
在全局:root{ }伪类中定义了一个	CSS3与页面机关进修总结（七）
而不是元素本身	在使用有厂商前缀的样式时